import React, {Component} from 'react';
import {Relax} from 'iflux2';
import noop from 'util/noop';
import {Button, message} from 'antd';
import {transformURL} from 'util/image';
import $script from 'scriptjs';
import PageAddressModal from './page-address-modal';
import LeftLiveEdit from './left-live-edit';
//普通图文右侧编辑
import NewsEditRight from './news-edit-right'
//高级图文右侧编辑
import NewsEditRightGaoji from './news-edit-right-gaoji'
import GaUtil from "util/ga-util";


@Relax
export default class NewsEdit extends Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            windowHeight: window.innerHeight,
            isEditorFull: false
        }
    }

    componentDidMount() {
        window.addEventListener('resize', this.handleResize);
    }

    handleResize = () => {
        this.setState({windowHeight: window.innerHeight});
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize);
    }

    static defaultProps = {
        tabs: '',// 微信图文news 高级图文adNews
        status: '',
        curItem: {},
        curIndexInItem: 0,
        _changeNewsValue: noop,
        _addNewsValue: noop,
        _updateInfoInNews: noop,
        _addNewsInterface: noop,
        _changeTab: noop,
        _setEdited: noop
    }

    render() {
        let _height = this.state.windowHeight;
        const {curItem, curIndexInItem, tabs, _changeTab} = this.props;
        //当前正在编辑的  具体哪一条
        const curEditInfo = curItem.getIn(['content', 'news_item', curIndexInItem]);
        return (
            <div className="newsEdit">
                {/** 左侧实时显示区域 **/}
                <LeftLiveEdit />
                {/** 右侧实时编辑区域 **/}
                {
                    tabs == 'news' ?
                        <NewsEditRight toggleVisible={() => this.setState({isEditorFull: !this.state.isEditorFull})}/> :
                        <NewsEditRightGaoji />
                }
                <div className="newsEditButtom"
                     style={{top: _height - 60 + "px", display: this.state.isEditorFull ? "none" : "block"}}>
                    <div style={{float: 'left', width: '100%', marginTop: '20px', marginLeft: "350px"}}>
                        <Button onClick={() => _changeTab(tabs)}>取消</Button>
                        <span>&nbsp;&nbsp;</span>
                        <Button type="primary" onClick={this._save}>保存</Button>
                    </div>
                </div>
            </div>
        )
    }

    //修改内容
    _setValue = (type, event) => {
        const v = event.target.value;
        const {_changeNewsValue, curIndexInItem} = this.props;
        _changeNewsValue({index: curIndexInItem, key: type, value: v});
    }

    //保存信息，注意区分新建还是修改(isNew关键字)
    _save = () => {
        const {curItem, curIndexInItem, _updateInfoInNews, _addNewsInterface, _setEdited} = this.props;
        const curInfo = curItem.getIn(['content', 'news_item', curIndexInItem]) || curItem.getIn(['articles', curIndexInItem]);
        let addNewsInfo = (curItem.getIn(['content', 'news_item']) || curItem.getIn(['articles'])).toJS();

        //更新图文下的某条消息
        if (curItem.get('media_id') || curItem.get('id')) {
            let bole = this._checkData([curInfo.toJS()]);
            if (!bole) {
                return;
            }
            _updateInfoInNews({
                media_id: curItem.get('media_id') || curItem.get('id'),
                index: curIndexInItem,
                articles: curInfo.toJS()
            })
            GaUtil.addEvent({eventAction: "更新图文", eventLabel: this.props.tabs === "news" ? "更新图文" : "更新高级图文"})
        } else {
            //新建整条图文
            let bole = this._checkData(addNewsInfo);
            if (!bole) {
                return;
            }
            _addNewsInterface(addNewsInfo);
            GaUtil.addEvent({eventAction: "新建图文", eventLabel: this.props.tabs === "news" ? "新建图文" : "新建高级图文"})
        }
        _setEdited(false);
        this.props._changeTab(this.props.tabs);
    }

    //数据校验
    _checkData = (array) => {
        let bole = true;
        let tabs = this.props.tabs;
        array.every(curInfo => {
            let thumb_media_id = curInfo['thumb_media_id'];
            let title = curInfo.title;
            let content = curInfo.content;
            if (!title) {
                bole = false;
                message.warn('标题不能为空');
                return false;
            } else if (!thumb_media_id) {
                bole = false;
                message.warn('封面图片不能为空');
                return false;
            } else if (tabs === 'news' && content && content.length > 20000) {
                bole = false;
                message.warn('图文消息正文过长');
                return false;
            } else if (tabs === 'news' && !content) {
                bole = false;
                message.warn('正文不能为空');
                return false;
            } else {
                return true;
            }
        });
        return bole;
    }

}